<template>
	<view class="app">
		<!-- <view class="content">
			流程说明
		</view>
		<view class="btn-bar">
			<u-button type="primary" size="medium" shape="square" @click="toPage('./form')">填写评级申请</u-button>
			<u-button type="primary" size="medium" shape="square" @click="toPage('./attachment')">上传附件</u-button>
		</view> -->
		<image class="bg" :src="bg" mode="widthFix"></image>
		<view class="main">
			<view class="title">申报流程</view>
			<view class="main-content">
				<image class="btn1" :src="btn1" mode="widthFix" @click="toPage('./form')"></image>
				<image class="btn2" :src="btn2" mode="widthFix" @click="toPage('./attachment')"></image>
				<image class="btn2" :src="btn3" mode="widthFix" @click="toPage('./yuyue')"></image>
				<view class="phone" @click="callPhone('13002464330')">
					<u-icon name="phone-fill" color="#ddd" size="28"></u-icon>
					咨询电话： 13002464330
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/ae731d01-ae8a-44aa-a8db-7513fde2b8c0.png',
				btn1: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/02f434a7-124f-45c6-b559-715e82fac40b.png',
				btn2: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/1cb1a5e0-1aad-4afe-95b3-a90e4c0ffa4f.png',
				btn3: 'https://mp-adf91af7-51bf-4e2e-abae-1ed51120ab92.cdn.bspapp.com/cloudstorage/191f39b4-9db9-43cd-8c0a-a6652808dc98.png',
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		methods: {
			initPage(options = {}){
				
			},
			toPage(url) {
				vk.navigateTo(url)
			},
			// 拨打电话
			callPhone(tel) {
				if(tel) uni.makePhoneCall({
					phoneNumber: tel
				})
			},
		}
	}
</script>

<style>
	/* .btn-bar{
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
	} */
	.app{
		position: relative;
		padding: 0;
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	
	.main{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	
	.title{
		margin: 18px 0;
		height: 60px;
		font-size: 1.8em;
		font-weight: 700;
		text-align: center;
		line-height: 60px;
		color: #fff;
		letter-spacing: 4px;
		text-decoration: underline;
	}
	
	.main-content{
		margin: auto;
		width: 90%;
		/* height: 50vh; */
		background-color: #fff;
		text-align: center;
		border: 2px solid #D1E0F8;
		border-radius: 10px;
		box-shadow: 0 0 1px 2px #D1E0F860;
	}
	
	.btn1{
		margin: 120rpx auto 0;
		width: 80%;
	}
	.btn2{
		margin: 60rpx auto 0;
		width: 80%;
	}
	.phone{
		margin: 90rpx auto 40rpx;
	}
</style>
